<template>
  <view class="nav">
    <!-- <view class="nav_box">
      <img src="../images/t1.png" alt="" class="img" />
      <view class="text">限时秒杀</view>
    </view>
    <view class="nav_box">
      <img src="../images/t2.png" alt="" class="img" />
      <view class="text">免费领娃</view>
    </view>
    <view class="nav_box">
      <img src="../images/t3.png" alt="" class="img" />
      <view class="text">新人礼包</view>
    </view>
    <view class="nav_box">
      <img src="../images/t4.png" alt="" class="img" />
      <view class="text">爱玩福利</view>
    </view>
    <view class="nav_box">
      <img src="../images/t5.png" alt="" class="img" />
      <view class="text">冲榜领豪礼</view>
    </view>
    <view class="nav_box">
      <img src="../images/t6.png" alt="" class="img" />
      <view class="text">拼车夺奖</view>
    </view> -->
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230609/28520989a49e82fd39ec989fa76449d5.png'
        "
        @click="toThinngList('luckybag')"
        mode="widthFix"
        alt=""
        class="img"
      />
      <view class="text">福袋</view>
    </view>
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230609/47b69ebcfa970308b7f8b680c1624ed2.png'
        "
        alt=""
        class="img"
        @click="toThinngList('yfs')"
        mode="widthFix"
      />
      <view class="text">一番赏</view>
    </view>
    <view class="nav_box">
      <img
        src="../images/aiwanmankai.png"
        alt=""
        class="img"
        @click="toThinngList('full_open')"
        mode="widthFix"
      />
      <view class="text">爱玩满开</view>
    </view>
    <view class="nav_box">
      <img
        src="../images/chongbang.png"
        alt=""
        class="img"
        @click="toThinngList('charts')"
        mode="widthFix"
      />
      <view class="text">冲榜领豪礼</view>
    </view>
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230609/7acd0acd2d79b4ad0dd0c522222ba094.png'
        "
        alt=""
        class="img"
        @click="toThinngList('coupon')"
        mode="widthFix"
      />
      <view class="text">礼包中心</view>
    </view>
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230503/cd6acf2e70a31247bc8a2acd910c095f.png'
        "
        @click="toSearchDetail('SP')"
        mode="widthFix"
        alt=""
        class="img"
      />
      <view class="text">SP</view>
    </view>
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230503/525e6e6866720886115281a2d12c7568.png'
        "
        alt=""
        class="img"
        @click="toSearchDetail('DIMOO')"
        mode="widthFix"
      />
      <view class="text">DIMOO</view>
    </view>
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230503/b9bd30f2093ce1e85cbed9e4aca10d02.png'
        "
        @click="toSearchDetail('BOB')"
        mode="widthFix"
        alt=""
        class="img"
      />
      <view class="text">BOB</view>
    </view>
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230503/2acfae384e749c7f9687905e1f353fe3.png'
        "
        alt=""
        class="img"
        @click="toSearchDetail('小野')"
        mode="widthFix"
      />
      <view class="text">小野 </view>
    </view>
    <!-- <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230503/ee626ced9a31d0a2bb954f8f162643fc.png'
        "
        @click="toSearchDetail('DORA')"
        mode="widthFix"
        alt=""
        class="img"
      />
      <view class="text">DORA</view>
    </view>
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230503/d45b46bcee85fbbf0bd02a898fd5ff7d.png'
        "
        alt=""
        class="img"
        @click="toSearchDetail('LABUBU')"
        mode="widthFix"
      />
      <view class="text">LABUBU</view>
    </view>
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230503/83ade636b5bf5c1337076bcd9027091f.png'
        "
        @click="toSearchDetail('Zsiga')"
        alt=""
        class="img"
        mode="widthFix"
      />
      <view class="text">Zsiga</view>
    </view>
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230503/0abb2b96e406c66d9555be34e0044348.png'
        "
        alt=""
        class="img"
        @click="toSearchDetail('HACI')"
        mode="widthFix"
      />
      <view class="text">HACI</view> -->
    <!-- </view> -->
    <!-- <view class="nav_box">
      <img src="../images/t9.png" alt="" class="img" />
      <view class="text">爱玩满开</view>
    </view>
    <view class="nav_box">
      <img src="../images/t10.png" alt="" class="img" />
      <view class="text">更多</view>
    </view> -->
    <view class="nav_box">
      <img
        :src="
          $IMG_URL + '/uploads/20230609/7001a5447c149079df2e71822e699587.png'
        "
        alt=""
        class="img"
        @click="toMore()"
        mode="widthFix"
      />
      <view class="text">更多</view>
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: 'indexNav',
  components: {},
  data() {
    return {};
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    toThinngList(e) {
      _delay(() => {
        switch (e) {
          case 'luckybag':
            uni.navigateTo({
              url: `pages/index/two_open_components/things-list?type=${e}`,
            });
            break;
          case 'yfs':
            uni.navigateTo({
              url: `pages/index/two_open_components/things-list?type=${e}`,
            });
            break;
          case 'full_open':
            uni.navigateTo({
              url: `pages/index/two_open_components/things-list?type=${e}`,
            });
            break;
          case 'coupon':
            uni.navigateTo({
              url: 'pages/app/coupon/coupon_center',
            });
            break;
          case 'charts':
            uni.navigateTo({
              url: 'pages/app/charts/index',
            });
            break;
        }
      });
    },
    toSearchDetail(e) {
      _delay(() => {
        uni.navigateTo({
          url: `pages/index/two_open_components/searchDetail?type=${e}`,
        });
      });
    },
    toMore() {
      _delay(() => {
        uni.navigateTo({
          url: 'pages/index/two_open_components/morePage',
        });
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.nav {
  width: calc(100vw-60rpx);
  height: 313rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  display: flex;
  flex-wrap: wrap;
  border-radius: 30rpx;
  margin-top: 12rpx;
  background: #f8f8f8;
  box-shadow: 1rpx 4rpx 19rpx 5rpx rgba(207, 207, 207, 0.36);
  box-sizing: border-box;
  .nav_box {
    width: 20%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img {
      width: 100rpx;
      // height: 100rpx;
    }
    .text {
      height: 20rpx;
      font-size: 20rpx;
      font-family: SourceHanSansCN;
      font-weight: 400;
      color: #000000;
      line-height: 22rpx;
      opacity: 0.7;
    }
  }
}
</style>
